<template>
	<view class="teachmain">
		<view class="teachtap">
			<uni-nav-bar  title="专家名师" left-icon="left" height="88rpx" fixed="true" border="false"></uni-nav-bar>
			<view class="inputserch">
				<input type="text" value=""  style="padding-left:30rpx ;">
			</view>
		</view>
		
					<uni-collapse ref="collapse" accordion  v-model="value" @change="change">
						<uni-collapse-item   v-for="(item,index) in teacherList" :key='index'  >
							<template  slot="title"> 
								<view class='TeacherItem'>
									<view class="left">
										<image :src="item.avatar" mode=""></image>
										<view class="">
											{{item.name}} 
										</view>	
									</view>
									<view class="right">
										<view class="title">
											<text class="daibiao">代表作品</text>
										<text @click="showMainInf(item)"> 更多 </text>	
										</view>
										<view class="fileList" >
												<view v-for="(i,n) in item.experts_works" :key='n' class="fileItem">
														<image :src="i.image" mode=""></image>
														<view>{{i.name}}</view>
												</view>
										</view>
									</view>
								</view>
							</template>
							
							<view class="content">
								<text v-for="(i,index) in teacherInfo.content" :key='index' class="text">{{i}}</text>
							</view>
						</uni-collapse-item>
					
					</uni-collapse>
			
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import wanlShopPage from '@/components/wanl-shop/page';
	import wanlShopFind from '@/components/wanl-shop/find';
	import wanlShopCategory from '@/components/wanl-shop/category';

	export default {
		components: {
			wanlShopPage,
			wanlShopFind,
			wanlShopCategory
		},
		computed: {
			...mapState(['common', 'user', 'update'])
		},

		data() {
			return {
				headHeight: 75,
				windowHeight: 0,
				teacherInfo:{},
				headTop: 0,
				page:1,
				value:'1',
				teacherList:[],
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				}
			};
		},
		onShow() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = sys.height + uni.upx2px(60);
			this.windowHeight = sys.windowHeight;
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarTextStyle : '',
					backgroundColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarBackgroundColor : ''
				});
			}, 200);
			this.getListData()
		},
		onReady() {
			// 判断网络类型
			uni.getNetworkType({
				success: res => {
					if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
						this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
					} else if (res.networkType == 'none') {
						this.$wanlshop.msg('没有网络');
					}
				}
			});
		},
		methods: {
			...mapActions({
				download: 'update/download', // 立即下载
				ignore: 'update/ignore' // 忽略更新
			}),
			change(e) {
				console.log(e);
			},
			getListData(){
				let vm =this
				vm.$api.get({
					url: '/experts/pageList',
					data:{
						page:vm.page
					},
					success: res => {
						console.log(res)
						vm.teacherList = res.list.data
						// this.BannerList = res.banner
					}
				})
			},
				
			showMainInf(i){
				let vm =this
				vm.$api.post({
					url: '/experts/info',
					data:{
						experts_id:i.id
					},
					success: res => {
						console.log(res)
						vm.teacherInfo = res	
						// vm.teacherList = res.list.data
						// this.BannerList = res.banner
					}
				}) 	 	
			},
		
		
		
		}
	};
</script>

<style lang="scss">
	.teachmain{
		.teachtap{
			height: 188rpx;
			background: #FFFFFF;
			position: relative;
			.inputserch{
				position: fixed;
				top:115rpx;
				left: 50%;
				margin-left: -315rpx;
				width: 630rpx;
				height: 60rpx;
				border: 1rpx solid #E3DEBF;
				border-radius: 50px;
			}
		}
			
		.TeacherItem{
			display: flex!important;
				width: 710rpx;
			    height: 228rpx;
			    background: #FFFFFF;
			    border-radius: 16rpx 16rpx 16rpx 16rpx;
			    opacity: 1;
				margin: 10rpx 20rpx 0;
				box-sizing: border-box;
				padding: 20rpx 30rpx;
				text-align: center;
				
				.right{
					.daibiao{
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 36rpx;
						color: #333333!important;
						// text-shadow: 0px 0px 48rpx rgba(151, 151, 151, 0.2);
						// opacity: 1;
					}	
					.title{
						display: flex;
						justify-content: space-between;
						align-items: center;
							
						text{
							color: #777;
						}
					}
				}
				.left{
					margin-right: 30rpx;
					image{
						width: 124rpx;
						height: 124rpx;
					}
					
				}
					
				.fileList{
					overflow: hidden;
					    white-space: nowrap;
						width: 500rpx;
					    margin-top: 20rpx;
					.fileItem{
						display: inline-block;
						width: 20%;
							
						view{
						}
						// height: ;
						image{
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
					}
				}
			}
			.content{
				
			}
			.content::before{
				
			}
		
	}		
</style>
